<!doctype html>

<head>

    <!-- player skin -->
    <!--<link rel="stylesheet" href="../skin/minimalist.css">-->

    <!-- site specific styling -->
    <!--<style>-->
        <!--body { font: 12px "Myriad Pro", "Lucida Grande", sans-serif; text-align: center; padding-top: 5%; }-->
        <!--.flowplayer { width: 80%; }-->
    <!--</style>-->

    <!-- flowplayer depends on jQuery 1.7.1+ (for now) -->
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

    <!-- include flowplayer -->
    <script src="../flowplayer.min.js"></script>

</head>

<body>

<!-- the player -->
<!-- player root -->
<div class="flowplayer">

    <!--
       A magic element that specifies the aspect ratio on different screen sizes
       http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio
    -->
    <div class="fp-ratio" style="padding-top:41.7%"></div>

    <!-- video or object tag depending on browser support (here it's just DIV) -->
    <div class="fp-engine"></div>

    <!-- user interface -->
    <div class="fp-ui">

        <!-- progress indicator -->
        <div class="fp-waiting"><em></em><em></em><em></em></div>

        <!-- buttons -->
        <a class="fp-fullscreen"></a>
        <a class="fp-unload"></a>

        <!-- timeline and volume. nested inside controls -->
        <div class="fp-controls">

            <!-- play button disabled by default, enable with play-button modifier class -->
            <a class="fp-play"></a>

            <div class="fp-timeline">
                <div class="fp-buffer" style="width: 70%;"></div>
                <div class="fp-progress" style="width: 35%;"><em></em></div>
            </div>

            <div class="fp-volume">
                <a class="fp-mute"></a>
                <div class="fp-volumeslider">
                    <div class="fp-volumelevel" style="width: 50%;"><em></em></div>
                </div>
            </div>

        </div>

        <!-- time -->
        <div class="fp-time">
            <em class="fp-elapsed">00:00</em>
            <em class="fp-remaining">-00:44</em>
            <em class="fp-duration">01:44</em>
        </div>

        <!-- error message -->
        <div class="fp-message">
            <h2>Invalid URL</h2>
            <p>http://invalid.url/com/my-video.mp4</p>
        </div>

        <!-- embedding -->
        <a class="fp-embed" title="Copy to your site"></a>

        <div class="fp-embed-code">
            <label>Paste this HTML code to your site.</label>
         <textarea>
            <!-- actual content on textarea -->
            <script src="//releases.flowplayer.org/5.5.2/embed.js">...</script>
         </textarea>
        </div>

    </div>

    <!-- help overlay -->
    <div class="fp-help">
        <a class="fp-close"></a>
        <div class="fp-help-section fp-help-basics">
            <p><em>space</em>play / pause</p>
            <p><em>esc</em>stop</p>
            <p><em>f</em>fullscreen</p>
            <p><em>shift</em> + <em>&#8592;</em><em>&#8594;</em>slower / faster</p>
        </div>
        <div class="fp-help-section">
            <p><em>&#8593;</em><em>&#8595;</em>volume</p>
            <p><em>m</em>mute</p>
        </div>
        <div class="fp-help-section">
            <p><em>&#8592;</em><em>&#8594;</em>seek</p>
            <p><em>&nbsp;. </em>seek to previous
            </p><p><em>1</em><em>2</em>&hellip;<em>6</em> seek to 10%, 20%, &hellip;60% </p>
        </div>
    </div>

    <!-- logo (hidden logic in javascript / flash) -->
    <a class="fp-logo" href="http://flowplayer.org" target="_top">
        <img src="//d32wqyuo10o653.cloudfront.net/logo.png" />
    </a>

    <!-- subtitles -->
    <div class="fp-subtitle">
        <p>This is the first line</p><br/>
        <p>And the second one.</p>
    </div>


    <!-- any custom HTML goes here -->

</div>

</body>